// import React, { useMemo } from 'react';
import { usePageEvent } from 'ray';
// import { View } from '@ray-js/ray';
// import { NavBar } from '@ray-js/smart-ui';
import { usePanelStore, useConstructor } from '@/hooks';
import { getCameraAngleByCloud } from '@/utils';
import { globalConfig } from '@/config';
import Strings from '@/i18n';
import { getLatestLogAsync } from '@/redux/actions';
import { LatestLog } from '@/components';
import StatusBar from './component/statusBar';
import Header from './component/header';
import TabBar from './component/tabbar';

// import { Tabbar, TabbarItem } from '@ray-js/smart-ui';
// import { SwitchPage } from './home-page/SwitchPage/index';
// import { PumpPage } from './home-page/PumpPage/index';
// import { LightPage } from './home-page/LightPage/index';
// import { SettingPage } from './home-page/SettingPage/index';

// import styles from './index.module.less';
import React from 'react';
import { Text, View } from '@ray-js/ray';
import { NavBar, Button } from '@ray-js/smart-ui';
import styles from './index.module.less';
import Connect from '@tuya-miniapp/icons/dist/svg/Connect';
import Timer from '@tuya-miniapp/icons/dist/svg/Timer';
import Stars from '@tuya-miniapp/icons/dist/svg/Stars';
// import Airplane from '@tuya-miniapp/icons/dist/svg/Connect';
import Setting from '@tuya-miniapp/icons/dist/svg/Setting';
import { Tabbar, TabbarItem } from '@ray-js/smart-ui';
import { SwitchPage } from './home-page/SwitchPage/index';
import { PumpPage } from './home-page/PumpPage/index';
import { LightPage } from './home-page/LightPage/index';
import { SettingPage } from './home-page/SettingPage/index';

// import Header from './component/header';

export const Home = () => {
  // const { powerCode } = usePanelStore();

  // // const cameraRotate = useMemo(() => getCameraAngleByCloud(powerCode), [powerCode]);

  useConstructor(() => {
    globalConfig.setConfig('themeColor', '#1c86ffff');
  });

  usePageEvent('onShow', () => {
    console.log('-----------------------------onPageShow-----------------------------');
    setTimeout(() => {
      getLatestLogAsync();
    }, 3000);
  });

  /*
    Header 主要包含 safeTime、remoteOpenDoor 组件
    TabBar 是一个tab列表，可以往成员管理、场景、设置页、视频监控、临时密码等页面
  */
  //**************************************************** 
  const [active, setActive] = React.useState(0);
  const onChange = e => {
    setActive(e.detail);
  };

    // 提前渲染所有页面，通过样式控制显示隐藏
  const switchPageStyle = { display: active === 0 ? 'block' : 'none' };
  const pumpPageStyle = { display: active === 1 ? 'block' : 'none' };
  const lightPageStyle = { display: active === 2 ? 'block' : 'none' };
  const settingPageStyle = { display: active === 3 ? 'block' : 'none' };

  // const renderPage = () => {
  //   switch (active) {
  //     case 0:
  //       return <SwitchPage />;
  //     case 1:
  //       return <PumpPage />;
  //     case 2:
  //       return <LightPage />;
  //     case 3:
  //       return <SettingPage />;
  //     default:
  //       return null;
  //   }
  // };
  const renderPage = () => {
    return (
      <>
        <View style={switchPageStyle}>
          <SwitchPage />
        </View>
        <View style={pumpPageStyle}>
          <PumpPage />
        </View>
        <View style={lightPageStyle}>
          <LightPage />
        </View>
        <View style={settingPageStyle}>
          <SettingPage />
        </View>
      </>
    );
  };



  return (

    <>
      {/* <NavBar title={Strings.getLang('title_home')} fixed placeholder />
      <View className={styles.container}> 
      <Header />
        <>
          <StatusBar />
          <LatestLog />
        </>
       <TabBar cameraRotate={cameraRotate} /> 
      </View> */}
      <View className={styles.home}>
        {renderPage()}
        <Tabbar
          active={active}
          safeAreaInsetBottom={false}
          onChange={onChange}
          className={styles.tabbar}
          inactiveColor="rgba(0, 0, 0, 0.3)"
          activeColor="rgb(255, 254, 254)"
        >
          
          <TabbarItem icon={Connect}>Switch</TabbarItem>
          <TabbarItem icon={Timer}>pump</TabbarItem>
          <TabbarItem icon={Stars}>Light</TabbarItem>
          <TabbarItem icon={Setting}>Setting</TabbarItem>

        </Tabbar>


      </View>
    </>
  );
};

export default Home;
